﻿@page "/components/tooltip"

<PageOutlet Url="components/tooltip"
            Title="Tooltip"
            Description="Tooltip component of the bit BlazorUI components" />

<DemoPage Name="Tooltip"
          Description="Tooltip component briefly describes unlabeled controls or provides a bit of additional information about labeled controls."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Surfaces/Tooltip/BitTooltip.razor"
          GitHubDemoUrl="Surfaces/Tooltip/BitTooltipDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>Explore the fundamental use of BitTooltip with a simple hover interaction on a BitButton.</div>
        <br />
        <div class="tooltips-container">
            <BitTooltip Text="This is the tooltip text">
                <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
            </BitTooltip>
        </div>
    </DemoExample>

    <DemoExample Title="Position" RazorCode="@example2RazorCode" Id="example2">
        <div>You can customize the Tooltip position to enhance the user experience.</div>
        <br />
        <div class="tooltips-container center">
            <div class="tooltips-container">
                <BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Top">
                    <BitButton Variant="BitVariant.Outline">Top</BitButton>
                </BitTooltip>
                <BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Right">
                    <BitButton Variant="BitVariant.Outline">Right</BitButton>
                </BitTooltip>
            </div>
            <br />
            <div class="tooltips-container">
                <BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Left">
                    <BitButton Variant="BitVariant.Outline" Style="width: 100%;">Left</BitButton>
                </BitTooltip>
                <BitTooltip DefaultIsShown="true" Text="Text" Position="BitTooltipPosition.Bottom">
                    <BitButton Variant="BitVariant.Outline">Bottom</BitButton>
                </BitTooltip>
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Custom content" RazorCode="@example3RazorCode" Id="example3">
        <div>Here are some examples of customizing the tooltip content.</div>
        <br />
        <div class="tooltips-container">
            <BitTooltip>
                <Template>
                    <ul style="padding: 0.5rem; margin: 0;">
                        <li>1. One</li>
                        <li>2. Two</li>
                    </ul>
                </Template>
                <Anchor>
                    <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
                </Anchor>
            </BitTooltip>
        </div>
    </DemoExample>

    <DemoExample Title="Advanced" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
        <div>Here are some examples of advanced usage of tooltip.</div>
        <br />
        <div class="tooltips-container center">
            <div class="tooltips-container">
                <BitTooltip @bind-IsShown="isShown"
                            Text="Text"
                            HideArrow="hideArrow"
                            HideDelay="(int)hideDelay"
                            ShowOnClick="showOnClick"
                            ShowOnHover="showOnHover"
                            Position="tooltipPosition">
                    <BitButton Variant="BitVariant.Outline" Style="width: 8rem;">Anchor</BitButton>
                </BitTooltip>
                <br />
                <BitDropdown Label="Tooltip positions" Items="tooltipPositionList" @bind-Value="tooltipPosition" Style="width: 8rem;" />
                <br />
                <BitNumberField Label="Hide delay" @bind-Value="hideDelay" Mode="BitSpinButtonMode.Inline" Style="width: 8rem;" />
            </div>

            <div class="tooltips-container">
                <BitToggle @bind-Value="isShown" Text="Toggle tooltip state" />
                <br />
                <BitToggle @bind-Value="hideArrow" Text="Hide tooltip arrow" />
                <br />
                <BitToggle @bind-Value="showOnClick" Text="Show tooltip on click" />
                <br />
                <BitToggle @bind-Value="showOnHover" Text="Show tooltip on hover" />
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Styles & Classes" RazorCode="@example5RazorCode" Id="example5">
        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
        <br /><br />
        <div class="tooltips-container">
            <div><b>Styles</b>:</div>
            <BitTooltip Text="This is the tooltip text" Styles="@(new() { Tooltip = "box-shadow: aqua 0 0 0.5rem;" })">
                <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
            </BitTooltip>
            <br /><br />
            <div><b>Classes</b>:</div>
            <BitTooltip Text="This is the tooltip text" Classes="@(new() { Tooltip = "custom-tooltip", Arrow = "custom-arrow" })">
                <BitButton Variant="BitVariant.Outline">Hover over me</BitButton>
            </BitTooltip>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example6RazorCode" Id="example6">
        <div>Use BitTooltip in right-to-left (RTL).</div>
        <br /><br />
        <div class="tooltips-container">
            <BitTooltip Dir="BitDir.Rtl">
                <Template>
                    <ul style="padding: 0.5rem; margin: 0;">
                        <li>۱. یک</li>
                        <li>۲. دو</li>
                    </ul>
                </Template>
                <Anchor>
                    <BitButton Variant="BitVariant.Outline">نشانگر ماوس را روی من بیاورید</BitButton>
                </Anchor>
            </BitTooltip>
        </div>
    </DemoExample>
</DemoPage>
